<template>
  <div class="api-tabs">
    <div class="api-tab-nav">
      <button 
        class="api-tab-btn" 
        :class="{ active: activeTab === 'doc' }"
        @click="activeTab = 'doc'"
      >
        接口文档
      </button>
      <button 
        class="api-tab-btn" 
        :class="{ active: activeTab === 'debug' }"
        @click="activeTab = 'debug'"
      >
        调试工具
      </button>
    </div>
    
    <!-- 接口文档Tab内容 -->
    <div class="api-tab-content" v-show="activeTab === 'doc'">
      <ApiDoc :current-api="currentApi" />
    </div>
    
    <!-- 调试工具Tab内容 -->
    <div class="api-tab-content" v-show="activeTab === 'debug'">
      <ApiDebug :current-api="currentApi" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import type { SimpleApiInfo } from '../api/model';
import ApiDoc from './ApiDoc.vue';
import ApiDebug from './ApiDebug.vue';

export default defineComponent({
  name: 'ApiDetail',
  components: {
    ApiDoc,
    ApiDebug
  },
  props: {
    currentApi: {
      type: Object as () => SimpleApiInfo,
      required: true
    }
  },
  setup() {
    const activeTab = ref<'doc' | 'debug'>('doc');
    
    return {
      activeTab
    };
  }
});
</script>

<style scoped>
/* API标签页样式 */
.api-tabs {
  width: 100%;
}

.api-tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 20px;
}

.api-tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.api-tab-btn:hover {
  color: var(--text-color);
}

.api-tab-btn.active {
  color: var(--theme-color);
  border-bottom-color: var(--theme-color);
}

.api-tab-content {
  padding: 0;
}
</style>